<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-button :disabled="searchLoading" size="mini" type="primary" @click="editInfo('新增')" icon="el-icon-circle-plus-outline"
				>新 增</el-button
			>
			<el-form label-width="120px">
				<el-form-item label="基金名称：" style="margin-bottom: 0">
					<el-select
						:disabled="searchLoading"
						v-model="fundSysCode"
						clearable
						filterable
						@change="searchClick()"
						style="width: 200px"
						size="medium"
					>
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option
							v-for="(item, index) in fundList"
							:key="index + item.fundSysCode"
							:label="item.fundCode + '-' + item.fundFullName"
							:value="item.fundSysCode"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="销售机构：" style="margin-bottom: 0">
					<el-select
						:disabled="searchLoading"
						v-model="salesOrganId"
						clearable
						filterable
						@change="searchClick()"
						style="width: 200px"
						size="medium"
					>
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option
							v-for="(item, index) in salesOrgList"
							:key="index + 'xiaos'"
							:label="item.salesOrganName"
							:value="item.salesOrganId"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:data="managementList"
				border
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column prop="fundCode" label="基金代码" width="100">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="fundCode" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="fundFullName" label="基金名称" width="500">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="fundFullName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="salesOrganName" label="销售机构名称" width="400">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="salesOrganName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" width="400">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="remark" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="operation" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" icon="el-icon-edit" @click="editInfo('修改', scope.row)">修改</el-button>
						<!-- <el-button size="mini" type="danger" icon="el-icon-delete" class="delebtn" @click="delInfo(scope.row.fundSalesOrganId)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>
		<managerInfo
			:title="title"
			:addComShow="addComShow"
			@comIsShow="comIsShow"
			@queryFundManagerList="getManagementList"
			:salesOrgList="salesOrgList"
			:fundList="fundList"
			ref="managerInfo"
		/>
	</el-container>
</template>
<script>
import { getSalesRelationship, deleSalesRelationship, getSalesOrgListPage, getFundList } from '@/api/productApi/mechanism'
import managerInfo from './components/index'
import { debounce } from '@/utils/debounceFunc'
export default {
	name: 'SalesRelationship',
	components: {
		managerInfo
	},
	data() {
		return {
			managementList: [],
			fundList: [],
			salesOrgList: [],
			fundSysCode: '',
			salesOrganId: '',
			// 分页配置
			paging: {
				// 显示的条目数
				size: 10,
				// 当前页数
				num: 1,
				total: 0,
				pages: 0,
				sizes: [10, 20, 50, 100]
			},
			title: '',
			addComShow: false,
			searchLoading: false
		}
	},
	mounted() {
		this.getFundList()
		this.getSalesOrgList()
		this.getManagementList()
	},
	methods: {
		// 基金列表（下拉框）
		getFundList: function() {
			getFundList({}).then(res => {
				if (res.msgCode === 'Y') {
					this.fundList = res.data.body
				} else {
					this.$message({ message: res.msgDesc, type: 'error' })
				}
			})
		},
		// 销售机构列表（下拉框）
		getSalesOrgList: function() {
			getSalesOrgListPage({}).then(res => {
				if (res.msgCode === 'Y') {
					this.salesOrgList = res.data.body
				}
			})
		},
		// 查询：管理人列表
		getManagementList: debounce(function() {
			const params = {}
			params.fundSysCode = this.fundSysCode
			params.salesOrganId = this.salesOrganId
			this.searchLoading = true
			getSalesRelationship(params, this.paging)
				.then(res => {
					if (res.msgCode === 'Y') {
						this.paging.total = res.data.page.total
						this.managementList = res.data.body
					}
				})
				.finally(() => {
					this.searchLoading = false
				})
		}, 10),
		delInfo(id) {
			this.operatorComfirm(() => {
				deleSalesRelationship({ fundSalesOrganId: id }).then(res => {
					if (res.msgCode === 'Y') {
						if (this.paging.total === 11) {
							this.paging.num = 1
						}
						this.getManagementList()
						this.$message({ message: res.msgDesc, type: 'success' })
					}
				})
			}, '删除基金-销售机构信息')
		},
		editInfo(title, item) {
			this.title = title
			this.comIsShow()
			if (item) {
				this.$refs.managerInfo.edit(JSON.stringify(item))
			}
		},
		comIsShow() {
			this.addComShow = !this.addComShow
		},
		// 搜索
		searchClick: function() {
			this.paging.num = 1
			this.getManagementList()
		},
		// 改变页数
		handleCurrentChange: function(val) {
			this.paging.num = val
			this.getManagementList()
		},
		// 改变条数
		handleSizeChange: function(val) {
            this.paging.num = 1
			this.paging.size = val
			this.getManagementList()
		}
	}
}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
